<template>
  <div class="titleborder">
    <div
      class="titlespan"
      :style="titleStyle"
    >
      {{ borderOptions.bordertitle }}
      <span style="color: #4FC7FF">
        {{ borderOptions.borderunit }}
      </span>
    </div>
    <div class="titlecontent" :style="borderOptions.titleContent">
      <slot />
    </div>
  </div>
</template>

<script>
import defaultmixins from '@/mixins/bigScreen/defaultmixins'

export default {
  name: 'DashWhiteTitleBorder',
  mixins: [defaultmixins],
  props: ['title'],
  data() {
    return {
      backUrl: require('@/assets/linglong/bg_chanliangyuchanpindanhao.png')
    }
  },
  computed: {
    titleStyle() {
      return {
        ...this.borderOptions.titleSpan,
        backgroundImage: `url(${this.backUrl})`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .titleborder {
    height: 100%;
    width: 100%;
    border: 1px solid #fffdef;
  }

  .titlespan {
    height: 30px;
    border: 1px dashed #fffdef;
    width: fit-content;
    background-size: 100% 100%;
    color: #FFFFFF;
  }
  .titlecontent {
    height: calc(100% - 30px);
  }
  .lbdiv {
  }
</style>
